/**
 * 学习目标：ReactRouter的使用步骤-BrowserRouter路由的使用
 */
import React, { Component } from 'react';

// 1. 下包 react-router-dom@5.3
// 2. 导入组件： HashRouter, Route, Link
import { HashRouter, Route, Link, BrowserRouter as Router } from 'react-router-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';

// 推荐👍 通过ES6的as语法来重命名路由器为Router

export default class App extends Component {
  render() {
    return (
      // 3. 使用Router包住所有的代码
      <Router>
        <div>App组件</div>
        <div>
          {/* 5. 使用Link组件，to属性去跳转 💥一般开头带上/ */}
          <Link to="/home">跳到Home</Link>
          <br />
          <Link to="/my">跳到我的音乐</Link>
          <br />
          <Link to="/friend">跳到朋友</Link>
        </div>
        {/* 4. 使用Route组件，指定路径与组件之前的对应关系 */}
        <Route path="/home" component={Home} />
        <Route path="/my" component={MyMusic} />
        <Route path="/friend" component={Friend} />
      </Router>
    );
  }
}

// 0. 创建子组件
class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Home组件</h1>
      </div>
    );
  }
}

class MyMusic extends React.Component {
  render() {
    return (
      <div>
        <h1>我是MyMusic组件</h1>
      </div>
    );
  }
}

class Friend extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Friend组件</h1>
      </div>
    );
  }
}
